﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Class/Class.Refactor</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#Class">Class</a></h4>
			<div class="menu-item"><a href="#Class:Class-refactor">Class.refactor</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Class"><a href="#Class">Class: Class.Refactor</a></h1>

<p class="description">Extends <a href="../../core/Class/Class.html">Class</a>.</p>

<h3>Tutorial/Demo</h3>

<ul>
<li><a href="http://www.clientcide.com/wiki/cnet-libraries/01.1-class.extras/00-class.refactor">Online Tutorial/Demo</a></li>
</ul>
<h2 id="Class:Class-refactor"><a href="#Class:Class-refactor">Class Static Method: refactor</a></h2>

<p class="description">Implements properties into a class preserving the previous state of methods so you can reference them..</p>

<h3>Syntax</h3>

<pre class="javascript">OriginalClass = <span class="kw2">Class</span>.<span class="me1">refactor</span><span class="br0">(</span>OriginalClass, newProperties<span class="br0">)</span>
</pre>

<h3>Arguments</h3>

<ol>
<li>OriginalClass - (<em>class</em>) the original class to augment</li>
<li>newProperties - (<em>object</em>) properties to assign to the class</li>
</ol>
<h3>Returns</h3>

<ul>
<li>
<em>object</em> - the original class with the new properties assigned. Any methods overwritten are preserved through <em>this.previous</em>.</li>
</ul>
<h3>Notes</h3>

<p>The <em>.implements</em> method of class allows you to inject new properties into an existing class. Where collisions of objects occur, they are blended. For example:</p>

<pre class="javascript"><span class="kw2">var</span> Animal = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    options: <span class="br0">{</span>
        color: <span class="st0">'brown'</span>,
        says: <span class="st0">'hissss'</span>
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
Animal.<span class="me1">implement</span><span class="br0">(</span><span class="st0">'options'</span>, <span class="br0">{</span>says: <span class="st0">'meow'</span><span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="co1">// Animal.prototype.options is now {says: 'meow', color: 'brown'};</span>
</pre>

<p>However, this is not the case with methods, which are overwritten.</p>

<p>Class.refactor, however, allows you to reference the previous state with <em>this.previous</em>. For example:</p>

<pre class="javascript"><span class="kw2">var</span> Cat = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    energy: <span class="nu0">0</span>,
        eat: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
            <span class="kw1">this</span>.<span class="me1">energy</span>++;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="kw2">Class</span>.<span class="me1">refactor</span><span class="br0">(</span>Cat, <span class="br0">{</span>
    eat: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">previous</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//energy++!</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">"this cat has "</span> + <span class="kw1">this</span>.<span class="me1">energy</span> + <span class="st0">" energy"</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<p>Note also that changes to a class affect the subclasses of that class.</p>

    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
